<!doctype html>
<!--[if lt IE 7]> <html class="no-js ie6 oldie" lang="en"> <![endif]-->
<!--[if IE 7]>    <html class="no-js ie7 oldie" lang="en"> <![endif]-->
<!--[if IE 8]>    <html class="no-js ie8 oldie" lang="en"> <![endif]-->
<!--[if gt IE 8]><!-->
<html class="no-js" lang="en" manifest="/webappfieldguide/appward.appcache">
<!--<![endif]-->
<head>
  <meta charset="utf-8">
  <!-- Copyright (c) 2012 Google Inc.
   *
   * Licensed under the Apache License, Version 2.0 (the "License");
   * you may not use this file except in compliance with the License.
   * You may obtain a copy of the License at
   *
   *     http://www.apache.org/licenses/LICENSE-2.0
   *
   * Unless required by applicable law or agreed to in writing, software
   * distributed under the License is distributed on an "AS IS" BASIS,
   * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   * See the License for the specific language governing permissions and
   * limitations under the License.
   *
  -->

  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">

  <title>Appward's Field Guide to Web Apps</title>
  <meta name="description" content="TODO">
  <meta name="viewport" content="width=device-width,initial-scale=1">
  <meta property="og:title" content="Appward's Field Guide to Web Applications"/>
  <meta property="og:image" content="http://www.webappfieldguide.com/img/appward_book_cover.png" />
  <meta property="og:description" content="Welcome to the 12th Edition of Bert Appward's Field Guide to Web Applications."/>

  <link rel="apple-touch-icon-precomposed" sizes="114x114" href="/webappfieldguide/apple-touch-icon-114x114-precomposed.png">
  <link rel="apple-touch-icon-precomposed" sizes="72x72" href="/webappfieldguide/apple-touch-icon-72x72-precomposed.png">
  <link rel="apple-touch-icon-precomposed" href="/webappfieldguide/apple-touch-icon-precomposed.png">

  <link rel="icon" media="all" type="image/x-icon" href="/webappfieldguide/favicon.ico">
  <link rel="icon" type="image/png" href="/webappfieldguide/favicon_01.png" />

  <link rel="stylesheet" href="/webappfieldguide/css/style.css">
  <script src="/webappfieldguide/js/libs/prefixfree.min.js" type="text/javascript"></script>
  <link href='http://fonts.googleapis.com/css?family=Crimson+Text' rel='stylesheet' type='text/css'>
  <link href='http://fonts.googleapis.com/css?family=Reenie+Beanie' rel='stylesheet' type='text/css'>
  <script src="/webappfieldguide/js/libs/modernizr-2.0.6.min.js"></script>
</head>

<body>
  <div id="loading"></div>

  <div id="background"></div>

  <div id="container">
    <div class="lightbox"></div>
    <div class="bookmark">
  		<img alt="Bookmark Top" src="/webappfieldguide/img/bookmark_top.png"/>
  		<div class="bg">
  			<a href="#" class="savedspot">Continue reading where I left off</a>
  			<a class="close" href="#" onclick="return false;">Start from beginning</a>
  		</div>
  		<img alt="Bookmark Bottom" src="/webappfieldguide/img/bookmark_bottom.png"/>
  	</div>
    <div id="main" role="main">
      <div id="binding-container">
        <div class="bindingRadialDropShadow"></div>
        <div id="binding" class="binding">
       	  <div class="pagesLeft" style="display:none"></div>
       	  <div class="pagesRight"></div>
       	  <div class="pageTurnTargetLeft" style="display:none"></div>
       	  <div class="PageTurnPreviewLeft"></div>
       	  <div class="pageTurnTargetRight"></div>
       	  <div class="PageTurnPreviewRight"></div>
       	  <a href="javascript:void(0)" class="booknav home"><em></em>Home</a>
       	  <a href="javascript:void(0)" class="booknav search"><em></em>Search</a>
       	  <div class="mobileNav">
            <div class="mobileNavBtn"></div>
            <div class="mobileMenu">
         			<a href="/webappfieldguide/toc/" class="">Home</a>
         			<a href="/webappfieldguide/know-your-apps/">1 | Know Your Apps</a>
         			<a href="/webappfieldguide/designing-web-applications/">2 | Designing Web Applications</a>
         			<a href="/webappfieldguide/case-studies/">3 | Case Studies</a>
         			<a href="/webappfieldguide/building-great-web-applications/">4 | Building Great Web Apps</a>
         			<a href="/webappfieldguide/about-appward/">5 | About Appward</a>
         			<a href="/webappfieldguide/search/">Search</a>
            </div><!-- end mobile menu -->
       	  </div>
       	  <div class="loading"></div>
       	  <div class="share">
         		<div class="shareOptions">
         			<h3>CHAPTER ACTIONS</h3>
         			<!-- G+1 -->
         			<div class="gplus">x</div>
         			<!-- Facebook -->
         			<div class="fb-like-btn"></div>
         			<!-- Twitter -->
         			<a target="_blank" href="https://twitter.com/share" class="social-btn twitter-share-button" data-url="asdf" data-count="horizontal">Tweet</a><script type="text/javascript" src="//platform.twitter.com/widgets.js"></script>
         			<a href="#" onClick="window.print()" class="print">Print</a>
         			<a href="#" class="bookmark-page">Bookmark</a>
         		</div><!-- end share options -->
         	</div>
    		  <div id="book">
      		  <div id="pages" class="cf">
      		  	<div class="chapterNav">
      		      <a href="/webappfieldguide/know-your-apps/" data-title="Know Your Apps" class="One">
    		  		    <div class="chapterPreview cf">
    		  				  <p class="chapterNum">1</p>
    		  				  <p class="chapterName">Know Your Apps</p>
    		  				  <div class="arrow"></div>
    		  			 </div>
    		  		  </a>
      		  		<a href="/webappfieldguide/designing-web-applications/" data-title="Designing Web Applications" class="Two">
      		  			<div class="chapterPreview cf">
      		  				<p class="chapterNum">2</p>
      		  				<p class="chapterName">Designing Web Applications</p>
      		  				<div class="arrow"></div>
      		  			</div>
      		  		</a>
      		  		<a href="/webappfieldguide/case-studies/" data-title="Case Studies" class="Three">
      		  			<div class="chapterPreview cf">
      		  				<p class="chapterNum">3</p>
      		  				<p class="chapterName">Case Studies</p>
      		  				<div class="arrow"></div>
      		  			</div>
      		  		</a>
      		  		<a href="/webappfieldguide/building-great-web-applications/" data-title="Building Great Web Applications" class="Four">
      		  			<div class="chapterPreview cf">
      		  				<p class="chapterNum">4</p>
      		  				<p class="chapterName">Building Great Web Apps</p>
      		  				<div class="arrow"></div>
      		  			</div>
      		  		</a>
      		  		<a href="/webappfieldguide/about-appward/" data-title="About Appward" class="Five">
      		  			<div class="chapterPreview cf">
      		  				<p class="chapterNum">5</p>
      		  				<p class="chapterName">About Appward</p>
      		  				<div class="arrow"></div>
      		  			</div>
      		  		</a>
              </div>
      		  	<div id="toc" class="chapter null" data-title="Table of Contents"></div>
      		    <div id="know-your-apps" class="chapter One" data-title="Know Your Apps"></div>
      		    <div id="designing-web-applications" class="chapter Two" data-title="Designing Web Applications"></div>
      		    <div id="case-studies" class="chapter Three" data-title="Case Studies of Web Apps in the Wild"></div>
      		    <div id="building-great-web-applications" class="chapter Four" data-title="Building Great Web Applications"></div>
      		    <div id="about-appward" class="chapter Five" data-title="About Appward"></div>
      		    <div id="search" class="chapter null" data-title="Search"></div>
      		    <div id="404" class="chapter null" data-title="Page Not Found"></div>
    		    </div><!-- end pages -->
          </div><!-- end book -->
        </div><!-- end binding -->
      </div><!-- end binding container -->
    </div><!-- end main -->
    <footer>
    </footer>
  </div> <!--! end of #container -->


  <script src="/webappfieldguide/js/libs/jquery-1.7.1.min.js"></script>
  <script defer src="/webappfieldguide/js/plugins.js"></script>
  <script defer src="/webappfieldguide/js/script.js"></script>
  <!-- end scripts-->

  <script type="text/javascript">
    var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-15028909-1']);
    _gaq.push(['_trackPageview']);

    (function() {
      var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
      ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
      var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
    })();
  </script>

  <!--[if lt IE 7 ]>
    <script src="//ajax.googleapis.com/ajax/libs/chrome-frame/1.0.3/CFInstall.min.js"></script>
    <script>window.attachEvent('onload',function(){CFInstall.check({mode:'overlay'})})</script>
  <![endif]-->


  <!-- share code -->
  <script type="text/javascript" src="https://apis.google.com/js/plusone.js">
    {parsetags: 'explicit'}
  </script>


  <script type="text/javascript">
    window.fbAsyncInit = function() {
      FB.init({
        appId      : '304943342852195', // App ID
        status     : true, // check login status
        cookie     : true, // enable cookies to allow the server to access the session
        oauth      : true, // enable OAuth 2.0
        xfbml      : true  // parse XFBML
      });

      // Additional initialization code here
    };

    // Load the SDK Asynchronously
    (function(d){
       var js, id = 'facebook-jssdk'; if (d.getElementById(id)) {return;}
       js = d.createElement('script'); js.id = id; js.async = true;
       js.src = "//connect.facebook.net/en_US/all.js";
       d.getElementsByTagName('head')[0].appendChild(js);
     }(document));
  </script>

  <div id="fb-root"></div>

</body>
</html>
